import styles from "./index.module.scss";
import React, {createElement} from 'react';
import { store } from '@ice/stark-data';

import img_404 from './img/404.svg';
import img_403 from './img/403.svg';
import img_500 from './img/500.svg';
import {Button} from 'antd';

type IConfig = {
  403: object;
  404: object;
  500: object;
}
const config: IConfig = {
  403: {
    img: img_403,
    title: '403',
    desc: '抱歉，您无权访问该页面',
  },
  404: {
    img: img_404,
    title: '404',
    desc: '抱歉，您访问的页面不存在',
  },
  500: {
    img: img_500,
    title: '500',
    desc: '抱歉，服务器出错了',
  },
};

type IProps = {
  className?: string;
  linkElement?: string;
  type?: number;
  title?: string;
  desc?: string;
  img?: string;
}

export default ({className = "", linkElement = 'a', type, title, desc, img, ...rest}: IProps) => {
  // @ts-ignore
  const pageType: string = config[type] ? type : '403';
// 各个子应用的重定向数据
  const defaultRedirectUrl = store.get('defaultRedirectUrl') || {};
  const realUrl = (defaultRedirectUrl['strategy'] || '').replace('/strategy', '');
  return (
    <div className={styles.exception + " " + className} {...rest}>
      <div className={styles.imgBlock}>
        <div
          className={styles.imgEle}
          style={{backgroundImage: `url(${img || config[pageType].img})`}}
        />
      </div>
      <div className={styles.content}>
        <h1>{title || config[pageType].title}</h1>
        <div className={styles.content}>{desc || config[pageType].desc}</div>
        <div className={styles.actions}>
          {
            createElement(linkElement, {
              to: realUrl,
              href: realUrl,
            }, <Button type="primary">返回首页</Button>)
          }
        </div>
      </div>
    </div>
  );
};
